<template>
  <div @touchstart="touchstart"
       @touchmove="touchmove"
       @touchend="touchend" ref="mark" class="mark">
    <div v-for="item in groupList" :key="item.GroupId">
      <h4>
        {{ item.GroupName }}
      </h4>
      <ul class="oul">
        <router-link
          :to="`/detail/${items.SerialID}`"
          tag="li"
          v-for="items in item.GroupList"
          :key="items.SerialID"
        >
          <img :src="items.Picture" alt="" />
          <div>
            <p>
              {{ items.AliasName }}
            </p>
            <p>
              <span>
                {{ items.DealerPrice }}
              </span>
            </p>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["groupList"],
  data() {
    return {
      moveInfo: {
        //  按下的位置
        prevPos: "",
        //  当前的位置
        curPos: "",
      }
    };
  },
  methods: {
    // 按下
    touchstart({ touches }) {
      // 保存按下的位置
      this.moveInfo.prevPos = touches[0];
      console.log("start");
    },
    // 移动
    touchmove({ touches }) {
      // 保存移动的位置
      this.moveInfo.curPos = touches[0];
      let delXWidth = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX;
      let delYHight = this.moveInfo.curPos.pageY - this.moveInfo.prevPos.pageY;

      // 控制可以斜着移动
      if (Math.abs(delYHight) > Math.abs(delXWidth)) {
        return;
      }

      // 如果 delXWidth<0不移动
      if (delXWidth < 0) {
        delXWidth = 0;
      }
      // 设置mark的位置
      this.$refs.mark.style.transform = `translateX(${delXWidth}px)`;
      //   console.log('move', delXWidth)
    },
    // 抬起
    touchend() {
      // 如果移动的位置超过屏幕的三分之一
      // 移动的位置
      let moveWith = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX;
      if (moveWith > window.innerWidth * 0.3) {
        //  切换成总屏幕宽度的0.7倍
        // ${window.innerWidth * 0.7}
        this.$refs.mark.style.transform = `translateX(${
          window.innerWidth * 0.7
        })`;
        this.$emit("close", false);
      } else {
        this.$refs.mark.style.transform = `translateX(0px)`;
        // this.$emit("close", false);
      }
    },
    // 跳转详情
    pushDetail() {
      this.$router.push("/detail");
    },
  },
};
</script>

<style lang="scss" scoped>
.mark {
  width: 70%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  overflow: scroll;
  background: #fff;
  animation: slidein 0.3s linear;
  h4 {
    height: 38px;
    color: #666;
    font-size: 28px;
    background: #f4f4f4;
    padding-left: 30px;
    line-height: 38px;
  }
  .oul {
    li {
      display: flex;
      img {
        width: 180px;
        height: 120px;
      }
      > div {
        padding: 10px 20px;
        p {
          font-size: 34px;
          color: #5f687a;
          span {
            color: orangered;
            font-size: 28px;
          }
        }
      }
    }
  }
}

@keyframes slidein {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
    // transform:
  }
}
</style>